第 12 屆 iThome 鐵人賽

DAY 10

Modern Web

強型闖入DenoLand系列第 10 篇

強型闖入DenoLand[9] - TS基礎系列之型別別名和介面(1)

12th鐵人賽 typescript deno

團隊北科大計算機

2020-09-25 19:54:09

1308 瀏覽

分享至

Node.js之父新專案Deno 1.0正式亮相| iThome

強型闖入DenoLand[9] - TS基礎系列之型別別名和介面(1)

提供給軟體元件間的介面會被存取到的事物的種類可以包括：常數、資料型別、程式的種類、例外規格、型別簽名。在某些個案，定義變數作為介面的一部份可能會很有用。介面常會透過註解或（於某些實驗性語言）透過正式的邏輯斷言指明那些程式和方法的功能。

-- wikipedia

如果你是一名使用過物件導向語言做開發的開發者，肯定對 Interface 不陌生。

Interface 可以讓我們先對物件規定好範疇，再進行實作。

以 PHP 為例，若我們今天想要實作一個 Linked List ：

interface linkedListInterface{
    function printList();
    function pushFront($data);
    function delete($inputValue);
    function pushBack($data);
    function reverse();
    function clearList();
}
class linkedList implements linkedListInterface{
// 實作...
}

上述程式碼中，我們先定義好了一個資料結構中有的抽象方法，再使用 class 進行實作。

知識點：資料結構

或許有人會覺得先定義好再做實作很多此一舉，但是當今天有多人開發的需求， Interface 就是一個相當好用的工具，因為先定義好了相關屬性和方法，可以有效避免多人開發的衝突。

知識點： Linked List

介面實戰

而在 TypeScript 中，我們同樣可以介面來定義物件的型別，至於到底該如何使用介面，就讓我們一起看看以下範例吧！

每個人都有姓名跟年齡， ian 也是人，所以在用物件定義 ian 之前，我們可以把這些確定的事物給抽離出來：

interface Person {
    name: string;
    age: number;
}

定義好一個人必備的元素後，實作物件 ian 時，我們就可以遵尋定義好的介面 Person ：

let ian: Person = {
    name: 'Ian',
    age: 21
};

需要注意的是，在遵循介面實作物件時，不能有多餘或是缺少的屬性，像是：

let ian: Person = {
    name: 'Ian',
    age: 21,
  	birthday: 19990119
};

或是：

let ian: Person = {
    name: 'Ian',
};

如果讀者認為某些屬性就算沒有被實作出來也沒關係，也可以考慮使用可選屬性： ? ：

interface Person {
    name: string;
    age?: number;
}

如此一來，不實作 age 也沒關係啦！

let peter: Person = {
    name: 'Peter',
};

假設讀者們更難搞，希望實作物件時可以有預期之外的屬性出現，那我們可以使用任意屬性：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

注意，若定義了任意屬性，那麼確定屬性和可選屬性的型別都必須是它的型別的子集。

什麼意思呢？

我們透過歸類可以知道：

name 的型別是 string。
age 的型別是 number。

所以，任意屬性的型別至少必須是 string 和 number 的聯集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

更懶一點的作法，可以讓任意屬性的型別指定為 any 。

不過筆者不建議這麼做就是了。

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

補充：唯讀屬性

若今天讀者在實作物件時，希望該物件的特定屬性在物件初始化以後就不能重新進行賦值，可以使用唯獨屬性： readonly 。

interface Person {
    readonly name: string;
    age?: number;
    [propName: string]: string | number;
}

不過在現實世界中這樣做的話，應該會有人感到痛不欲生吧，像是：

黃宏成台灣阿成世界偉人財神總統

而最好的作法應該是這樣：

interface Female {
    name: string;
    readonly age?: number;
}
let cindy: Female = {
    name: 'Cindy',
  	age: 18
};

強型闖入DenoLand系列第 10 篇